<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/layout.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/register.css">
    <style>

    </style>
</head>

<body>
    <!-- 顶部导航条 -->
    <div class="box">
        <div class="warp">
            <div class="top">
                <ul>
                    <li><a href="a#"><img src="./img/star.jpg" alt="" srcset=""></a></li>
                    <li>收藏</li>
                    <li>|</li>
                    <li>Hi,欢迎来订购!</li>
                    <a href="./register.html">
                        <li class="text">[请登录]</li>
                    </a>
                    <a href="./register.html">
                        <li class="text">[免费注册]</li>
                    </a>
                </ul>
            </div>
            <div class="top-rigth">
                <a href="#">客户服务</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>

                <a href="#">网站导航</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
                <a href="#"><img class="top-rigth-go" src="./img/shoppingcart.png" alt="" srcset=""></a>
                <a href="#">我的购物车0件</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
            </div>
        </div>
    </div>
    <!-- 顶部导航条end -->

    <!-- 顶部图片 -->
    <div class="warp">
        <div class="warp-manbu">
            <a href="#" class="manbu-left"><img src="./img/漫步时代广场-左.jpg" alt="" srcset=""></a>
            <a href="#" class="manbu-rigth"><img src="./img-layout/banner.jpg" alt="" srcset=""></a>
        </div>
    </div>
    <!-- 顶部图片end -->

    <!-- 导航条 -->
    <div class="daohang">
        <div class="warp">
            <div class="daohang-text">
                <ul class="nav">
                    <a href="./index.html">
                        <li>首页</li>
                    </a>
                    <a href="">
                        <li>最新上架</li>
                    </a>
                    <a href="./layout.html">
                        <li>品牌活动</li>
                    </a>
                    <a href="">
                        <li>原厂直供</li>
                    </a>
                    <a href="">
                        <li>团购</li>
                    </a>
                    <a href="./details.html">
                        <li>限时抢购</li>
                    </a>
                    <a href="./layout.html">
                        <li>促销打折</li>
                    </a>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航条end -->
    <div class="warp">
        <!-- 下面开始都是register.css -->
        <div class="center-1">
            <div class="zhuce">
                <h3>用户注册</h3>
            </div>
            <div class="zhuce_pic">
                <img src="./img-layout/zhuce_pic.jpg" alt="" srcset="">
            </div>
            <form name="myForm" action="#" onsubmit="return validateForm()" method="post" enctype="multipart/form-data"
                class="register">
                <div class="form-item">
                    <label for="username">用户名:</label>
                    <input type="text" name="username" id="username" placeholder="用户名">
                </div>

                <div class="form-item">
                    <label for="username">邮箱地址:</label>
                    <input type="text" name="youxiang" id="username" placeholder="请输入邮箱地址">
                </div>
                <div class="form-item">
                    <label for="username">设置密码:</label>
                    <input type="text" name="username" id="username" placeholder="">
                </div>
                <p>6-20个字符，由字母、数字和符号的两种以上组合。</p>
                <div class="form-item">
                    <label for="username">确认密码:</label>
                    <input type="text" name="username" id="username" placeholder="">
                </div>
                <div class="form-item">
                    <label for="username">真实姓名:</label>
                    <input type="text" name="username" id="username" placeholder="请输入真实姓名">
                </div>
                <div class="form-item">
                    <label for="username">您的性别:</label>
                    <input type="radio" name="username" id="username"><span>男</span>
                    <span></span>
                    <input type="radio" name="username" id="username"><span>女</span>
                </div>
                <div class="form-item">
                    <label for="username">上传头像:</label>
                    <input type="submit" name="username" id="username" value="选择文件" class="xuanze"><span
                        class="xuanze-text">未选择文件</span>
                </div>
                <div class="form-item">
                    <label for="username">您的手机:</label>
                    <input type="text" name="username" id="username" placeholder="请输入您的手机">
                </div>
                <div class="form-item">
                    <label for="username">单位名称:</label>
                    <input type="text" name="username" id="username" placeholder="请输入单位名称">
                </div>

                <div class="form-item">
                    <label for="username">单位地址:</label>
                    <select id="one">
                        <option>-请选择省份-</option>

                    </select>
                    <select id="two" class="yy">
                        <option>-请选择市-</option>

                    </select>
                    <select id="three" class="yy">
                        <option>-请选择市区-</option>

                    </select>
                </div>

                <!-- 三级菜单联动 -->
                <script>
                    var oone = document.getElementById("one");
                    console.log(oone);
                    var otwo = document.getElementById("two");
                    console.log(otwo);
                    var three = document.getElementById("three");
                    var str = '';
                    otwo.disabled = true;
                    three.disabled = true;
                    var arr1 = [
                        { "id": "1", "value": "北京" },
                        { "id": "2", "value": "上海" },
                        { "id": "3", "value": "广东省" },
                        { "id": "4", "value": "天津" },
                        { "id": "5", "value": "山东" }];
                    for (var i = 0; i < arr1.length; i++) {
                        str += "<option value=" + arr1[i].id + ">" + arr1[i].value + "</option>"
                    }
                    oone.innerHTML = str;
                    var arr2 = {
                        '1': ['101@北京'],
                        '2': ['201@上海'],
                        '3': ['301@广州', '302@深圳', '303@清远', '304@潮汕'],
                        '4': ['401@天津'],
                        '5': ['501@济南', '502@青岛']
                    };
                    oone.onchange = function () {
                        var val = this.value;
                        var arrA = arr2[val];
                        var str1 = '<option>请输入市</option>';
                        for (var j = 0; j < arrA.length; j++) {
                            var aaa = arrA[j].split('@');
                            str1 += "<option value=" + aaa[0] + ">" + aaa[1] + "</option>"
                        }
                        otwo.innerHTML = str1;
                        otwo.disabled = false;
                        three.innerHTML = '<option>请输入区</option>';
                        three.disabled = 'disabled';
                    }
                    var arr3 = {
                        '101': ['朝阳区', '昌平区'],
                        '201': ['宝山区', '浦东区'],
                        '301': ['天河区', '番禺区'],
                        '401': ['真的不知道'],
                        '501': ['市中区', '历下区', '槐荫区'],
                        '502': ['市南区', '市北区', '崂山区']
                    };
                    otwo.onchange = function () {
                        var val = this.value;
                        console.log(this.value);
                        var str2 = '<option>请输入区</option>';
                        console.log(val)
                        for (var l = 0; l < arr3[val].length; l++) {
                            str2 += "<option >" + arr3[val][l] + "</option>"
                        }
                        three.innerHTML = str2;
                        three.disabled = false;
                    }
                </script>
                <!-- 三级菜单联动end -->

                <div class="form-item">
                    <input type="text" class="jiedao" name="username" id="username" placeholder="请输入街道地址">
                </div>
                <div class="form-item">
                    <label for="username">您的爱好:</label>
                    <input type="checkbox" name="username" id="username"><span>购物</span>
                    <span></span>
                    <input type="checkbox" name="username" id="username"><span>影视</span>
                    <span></span>
                    <input type="checkbox" name="username" id="username"><span>餐饮</span>
                </div>
                <div class="form-item">
                    <label for="username">协议内容:</label>
                    <textarea rows="10" cols="30">我是一个文本框</textarea>

                </div>
                <input type="submit" value="提交" class="tijiao">
            </form>

            <script>
                const input = document.querySelector('input').value
                console.log(input);
                if (input == null) {
                    document.write('不能为空')
                }

                // function validateForm() {
                //     var x = document.forms["myForm"]["username"].value;
                //     var y = document.forms["myForm"]["youxiang"].value;
                //     if (x == null || x == "") {
                //         alert("姓必须填写");
                //         return false;
                //     };

                //     if (y == null || y == "") {
                //         alert("邮箱必须填写");
                //         return false;
                //     }
                //     return true
                // }
            </script>
            <div class="dibu-img">
                <a href=""><img src="./img-layout/shop.jpg" alt="" srcset=""></a>
                <a href=""><img src="./img-layout/movie.jpg" alt="" srcset=""></a>
                <a href=""><img src="./img-layout/food.jpg" alt="" srcset=""></a>
            </div>
        </div>

    </div>
    <div class="dibu">
        <p class="dibu-text"><a href="#">Copyright 2015-2020 Q- Walking Fashion E&S漫步时尚广场(QST教育)版权所有</a></p>
        <p><a href="#">中国青岛高新区河东路8888号青软教育集团咨询热线: 400- 658 0166400- 658 1022</a></p>
        <img src="./img/foot_pic.jpg" alt="" srcset="">
    </div>


    <script>

    </script>
</body>

</html>